import { Button, Table, Tag } from 'antd';
import { useState } from 'react';
import EditTable from './editTable';
import { connect } from 'react-redux';
import { defaultColumn } from './defaultColumn';

function ListPage({ userList, dispatch }) {
  const [columns, setColumn] = useState(defaultColumn);

  function submitData() {
    console.log(userList.userList);
    fetch('api/postData', {
      method: 'POST',
      body: JSON.stringify({
        data: userList.userList,
        name: 'test.json',
      }),
    });
  }

  var list = userList.map((user) => {
    let name = String(user.name);
    let split = name.split(' ', 2);
    if (split.length === 2) {
      let firstName = split[0];
      let lastName = split[1];
      return {
        ...user,
        firstName,
        lastName,
      };
    }
    return user;
  });

  return (
    <div>
      <EditTable columns={columns} data={list} dispatch={dispatch}></EditTable>
      <Button onClick={submitData}>submit</Button>
    </div>
  );
}
export default connect(({ userList }) => {
  return {
    userList: userList,
  };
})(ListPage);
